<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="scenicId">
        <KiSelect
          v-model="list.filter.scenicId"
          placeholder="输入景区名称搜索"
          :search="
            scenicName =>
              new Promise(resolve => {
                $POST('sot-admin-api/scenic/listForSelect', {
                  scenicName
                }).then(({ data }) => {
                  resolve(data)
                })
              })
          "
          :options.sync="options.scenic"
          :props="{ value: 'scenicId', label: 'scenicName' }"
        />
      </el-form-item>
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <KiSelect
          :index.sync="list.filter.status"
          :options="['停用', '启用']"
          placeholder="状态"
        />
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <el-button
          v-if="hasBtn['新增']"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="c"
        >
          新增
        </el-button>
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="景区名称" prop="scenicName" />
      <el-table-column label="专区类型">
        <template slot-scope="{ row }">
          {{
            row.zoneType
              | $value2label([
                { dataValue: 1, dataName: '预约专区' },
                { dataValue: 2, dataName: '购票专区' }
              ])
          }}
        </template>
      </el-table-column>
      <el-table-column label="专区标题" prop="zoneTitle" />
      <el-table-column label="专区banner">
        <template slot-scope="{ row }">
          <PicViewer tableCell :value="row.bannerUrl" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row: { id } }">
          <KiPopButton v-if="hasBtn['编辑']" @click="u({ id })">
            编辑
          </KiPopButton>
          <KiPopButton
            v-if="hasBtn['删除']" text="![#FF7575]"
            :elPopconfirmProps="{ title: '确认删除吗？' }"
            @click="d({ id })"
          >
            删除
          </KiPopButton>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :title="formTitle"
      :show.sync="form.show"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="专区标题" prop="zoneTitle" verify>
          <el-input
            v-model="form.data.zoneTitle"
            clearable
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="专区banner" prop="bannerUrl" verify>
          <Imgpond
            v-model="form.data.bannerUrl"
            fixedRadio="345/86"
            :count="1"
          />
        </el-form-item>
        <el-form-item label="专区公告弹框标题" prop="title" verify>
          <el-input
            v-model="form.data.title"
            clearable
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="专区公告弹框内容" prop="content" verify>
          <el-input
            v-model="form.data.content"
            type="textarea"
            :autosize="{ minRows: 3 }"
            clearable
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/reservation/reservation-zone'
    }),
  data () {
    return {
      options: {
        scenic: []
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>
